<%@ page import="com.bdqn.tour.pojo.Ticket" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <style type="text/css">
    ul li {
      list-style: none;
      display: inline;
    }

    img {
      vertical-align: middle;
    }

    #navbar-left {
      width: 100%;
      height: 30px;
      background-color: lightgrey;
      line-height: 30px;

    }

    #navbar-left ul li span {
      font-size: 12px;
      color: #999;
      margin-left: 30px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    nav {
      position: absolute;
      left: 900px;
      top: -10px;
      padding: 0 16px;
    }

    .nav-list {
      display: flex;
      list-style: none;
      height: 48px;
      align-items: center;
    }

    .nav-item {
      position: relative;
    }

    .nav-link {
      display: flex;
      align-items: center;
      padding: 8px 16px;
      text-decoration: none;
      font-size: 12px;
      color: #999;
      cursor: pointer;
    }


    .dropdown-icon {
      width: 12px;
      height: 12px;
      margin-left: 4px;
      transform: rotate(0deg);
      transition: transform 0.2s;
    }

    .dropdown-icon.active {
      transform: rotate(180deg);
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: whitesmoke;
      width: 100px;
      display: none;
      opacity: 0;
      transition: opacity 0.2s;
      margin-left: 15px;
    }

    .dropdown-menu.show {
      display: block;
      opacity: 1;
    }

    .dropdown-item {
      display: block;
      text-decoration: none;
      color: #666;
      font-size: 12px;
      margin-top: 10px;
      text-indent: 30px;

    }

    .dropdown-item:hover {
      color: red;
    }

    #bog-box-top {
      align-items: center;
    }


    <%--loger地名部分--%>
    .city-selector {
      position: relative;
      display: inline-block;
    }

    .selected-city {
      margin-left: 20px;
      line-height: 40px;
      height: 40px;
      font-size: 16px;
      color: #666666;
    }

    .city-trigger {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      background: none;
    }

    .city-trigger:hover {
      color: #00b96b;
    }

    .arrow {
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid currentColor;
      transition: transform 0.2s;
    }

    .arrow.down {
      transform: rotate(180deg);
    }

    .dropdown {
      display: none;
      position: absolute;
      top: 50px;
      left: 22px;
      width: 600px;
      background: white;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      border-radius: 4px;
      padding: 16px;
      z-index: 1000;

    }

    .tabs {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
      border-bottom: 1px solid #eee;
      padding-bottom: 8px;
    }

    .tab {
      padding: 4px 8px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      background: none;
      color: #666;
    }

    .tab.active {
      color: #00b96b;
      border-bottom: 2px solid #00b96b;
    }

    .cities-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
    }

    .city-button {
      padding: 8px;
      font-size: 14px;
      border: none;
      background: none;
      cursor: pointer;
      border-radius: 4px;
    }

    .city-button:hover {
      color: red;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .contact-wrapper {
      position: absolute;
      left: 1300px;
      top: 65px;
      z-index: 1000;
    }


    .contact-icon i {
      color: white;
      font-size: 24px;
    }

    .contact-info {
      position: absolute;
      left: 0;
      top: 60px;
      width: 200px;
      background: white;
      border-radius: 8px;
      padding: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      display: none;
    }

    .contact-info h3 {
      margin: 0 0 10px 0;
      font-size: 16px;
      color: #333;
    }

    .qr-code {
      width: 150px;
      height: 150px;
      margin: 10px auto;
      display: block;
    }

    .phone-numbers {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid #eee;
    }

    .phone-number {
      margin: 5px 0;
      color: #666;
      font-size: 14px;
    }


    #span-kefu {
      font-size: 12px;
      display: inline-block;
      margin-left: 10px;
      color: #666666;
    }

    #span-ipone {
      color: #666666;
    }

    /*头部导航栏*/
    #GYH-nav {
      background-color: #00c250;
      width: 100%;
      padding: 0;
      margin: 0;
      margin-top: 20px;
    }

    .GYH-nav-container {


      display: flex;
      align-items: center;

    }

    .GYH-nav-list {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .GYH-nav-item {
      position: relative;
      margin-left: 6px;
    }

    .GYH-nav-link {
      color: white;
      text-decoration: none;
      padding: 15px 20px;
      display: block;
      font-size: 14px;
      position: relative;

    }

    .GYH-nav-link:after {
      content: "▾";
      margin-left: 5px;
      font-size: 12px;
      opacity: 0.8;
    }

    .GYH-nav-item:hover .GYH-nav-link {
      background-color: rgba(0, 0, 0, 0.1);
    }

    .GYH-dropdown {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: white;
      min-width: 150px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      display: none;
      z-index: 1000;
    }

    .GYH-dropdown-item {
      padding: 10px 15px;
      color: #333;
      text-decoration: none;
      display: block;
      border-bottom: 1px solid #eee;
    }

    .GYH-dropdown-item:hover {
      background-color: #f5f5f5;
    }

    /*底部*/
    .service-highlights {
      display: flex;
      justify-content: space-around;
      padding: 20px 0;
      background: #fff;
      border-bottom: 1px solid #eee;
    }

    .highlight-item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #666;
    }

    .site-footer {
      background: #333;
      color: #fff;
      padding: 40px 0;
    }

    .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      padding: 0 20px;
    }

    .footer-section h3 {
      font-size: 16px;
      margin-bottom: 20px;
      color: #fff;
    }

    .footer-section ul {
      list-style: none;
      padding: 0;
    }

    .footer-section{
      margin-left: -50px;
    }

    .footer-section ul li {
      margin-bottom: 10px;
      display: block;
    }

    .footer-link {
      color: #999;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-link:hover {
      color: #fff;
    }

    .qr-code {
      text-align: center;
    }

    .qr-code img {
      width: 120px;
      height: 120px;
      margin-bottom: 10px;
    }

    .popular-links {
      max-width: 1200px;
      margin: 20px auto 0;
      padding: 20px;
      border-top: 1px solid #444;
    }

    .links-section {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      color: #999;
    }

    .links-section a {
      color: #999;
      text-decoration: none;
    }

    .links-section a:hover {
      color: #fff;
    }



    #footer-section{
      position: absolute;
      left: 1400px;

    }

    #footer-section h3{
      margin-left: 12px;
    }


    #foot-bottom a{
      text-decoration: none;
      color: grey;
    }

    #foot-bottom p{
      color: grey;
    }

    #login-text-index{
      text-decoration: none;
      color: #999999;
    }

    #zhuce a{
      text-decoration: none;
      color: #999999;
    }
    main {
      display: flex;
      justify-content: space-between;
      padding: 2rem;
    }
    .search-form {
      width: 30%;
      border: 1px solid #ced4da;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .qr-code {
      width: 65%;
      text-align: center;
    }
    .steps {
      display: flex;
      justify-content: space-around;
      margin-top: 2rem;
    }
    /*数据样式*/
    .train-list {
      max-width: 1200px;
      margin: 20px auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 每行显示3个卡片 */
      gap: 20px; /* 卡片之间的间距 */
    }

    .train-item {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 8px;
      padding: 20px;
      position: relative;
    }

    .info-group {
      display: flex;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .info-label {
      color: #666;
      font-size: 14px;
    }

    .info-value {
      color: #333;
      font-weight: 500;
      font-size: 14px;
      text-align: right;
    }

    .price-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      padding-top: 15px;
      border-top: 1px solid #f0f0f0;
    }

    .price {
      color: #ff4d4f;
      font-size: 20px;
      font-weight: bold;
    }

    .btn-primary {
      background: #00c250;
      color: white;
      border: none;
      padding: 6px 16px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }

    .btn-primary:hover {
      background: #00a040;
    }

    /* 响应式布局 */
    @media (max-width: 1200px) {
      .train-list {
        grid-template-columns: repeat(2, 1fr); /* 中等屏幕显示2列 */
      }
    }

    @media (max-width: 768px) {
      .train-list {
        grid-template-columns: 1fr; /* 小屏幕显示1列 */
      }
    }
  </style>
</head>





<body>
<div id="bog-box-top">
  <div id="navbar-left">
    <ul>
      <li><span><a id="login-text-index" href="/login.jsp">您好，请登录</a><span id="tuichu">退出</span></span></li>
      <li><span id="zhuce"><a href="/register.jsp">注册</a></span></li>
      <li><img src="static/img/pc_index_gister.gif"></li>
    </ul>


  </div>


  <nav>
    <ul class="nav-list">
      <li class="nav-item">
        <a class="nav-link">
          Language
          <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item"><img
                  src="static/img/rBLkCVvWbqmAJWxmAAABQaM8azg489.png">English</a>
          <a href="#" class="dropdown-item"><img src="static/img/rBLkCVvS7pSAa_ssAAAA82XoyWY361.png">中文</a>
        </div>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">我的订单</a>
      </li>
      <li class="nav-item">
        <a class="nav-link">
          我的同程
          <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">我的订单</a>
          <a href="#" class="dropdown-item">我的信息</a>
          <a href="#" class="dropdown-item">我的收藏</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link">
          客服服务
          <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">帮助中心</a>
          <a href="#" class="dropdown-item">在线客服</a>
          <a href="#" class="dropdown-item">人工申诉</a>
          <a href="#" class="dropdown-item">抱团定制</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link">
          合作中心
          <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M6 9l6 6 6-6"/>
          </svg>
        </a>
        <div class="dropdown-menu">
          <a href="#" class="dropdown-item">网站加盟</a>
          <a href="#" class="dropdown-item">合作加盟</a>
          <a href="#" class="dropdown-item">门票合作</a>
          <a href="#" class="dropdown-item">商旅合作</a>
        </div>
      </li>

      <li class="nav-item">
        <a id="my-admin" href="backStageManagement.jsp" class="nav-link">我的后台</a>
      </li>
    </ul>
  </nav>

</div>

<div>
  <img src="static/img/PS2lfS0492.jpg">
</div>


<%--首页导航栏--%>
<div id="GYH-nav">

  <div class="GYH-nav-container">
    <ul class="GYH-nav-list">
      <li class="GYH-nav-item">
        <a href="/index.jsp" class="GYH-nav-link">首页</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/jd-index.jsp" class="GYH-nav-link">酒店</a>
        <div class="GYH-dropdown">
          <a href="/hotel/domestic" class="GYH-dropdown-item">国内酒店</a>
          <a href="/hotel/international" class="GYH-dropdown-item">国际酒店</a>
        </div>
      </li>
      <li class="GYH-nav-item">
        <a href="/search_tickets.jsp" class="GYH-nav-link">机票</a>
        <div class="GYH-dropdown">
          <a href="/flight/domestic" class="GYH-dropdown-item">国内机票</a>
          <a href="/flight/international" class="GYH-dropdown-item">国际机票</a>
        </div>
      </li>
      <li class="GYH-nav-item">
        <a href="/train.jsp" class="GYH-nav-link">火车票</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/car" class="GYH-nav-link">汽车船票</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/vacation" class="GYH-nav-link">景点</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/local" class="GYH-nav-link">周边团购</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/domestic" class="GYH-nav-link">境内游</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/international" class="GYH-nav-link">出境游</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/post" class="GYH-nav-link">邮轮</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/visa" class="GYH-nav-link">签证</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/strategy.jsp" class="GYH-nav-link">攻略</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/corporate" class="GYH-nav-link">企业商旅</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/corporate" class="GYH-nav-link">亮丽内蒙古</a>
      </li>
      <li class="GYH-nav-item">
        <a href="/corporate" class="GYH-nav-link">更多</a>
      </li>
    </ul>
  </div>
</div>



<!-- 火车车次详情 -->
<section>
  <header>
    <h1 style="text-align: center;">火车车次详情</h1>
  </header>
  <main class="train-list">
    <%
      String searchIdParam = request.getParameter("searchId");
      HttpSession session1 = request.getSession();
      String searchIdSession = (String) session1.getAttribute("searchId");
      List<Ticket> tickets = (List<Ticket>) session1.getAttribute("tickets");

      if (searchIdParam != null && searchIdParam.equals(searchIdSession) && tickets != null && !tickets.isEmpty()) {
        for (Ticket ticket : tickets) {
    %>
    <div class="train-item">
      <div class="train-info">
        <div class="info-item">
          <span class="info-label">车次编号：</span>
          <span class="info-value"><%=ticket.getId()%></span>
        </div>
        <div class="info-item">
          <span class="info-label">出发城市：</span>
          <span class="info-value"><%=ticket.getDepartureCity()%></span>
        </div>
        <div class="info-item">
          <span class="info-label">到达城市：</span>
          <span class="info-value"><%=ticket.getArrivalCity()%></span>
        </div>
        <div class="info-item">
          <span class="info-label">出发日期：</span>
          <span class="info-value"><%=ticket.getDepartureDate()%></span>
        </div>
        <div class="info-item">
          <span class="info-label">出发时间：</span>
          <span class="info-value"><%=ticket.getStartTime()%></span>
        </div>
        <div class="info-item">
          <span class="info-label">到达时间：</span>
          <span class="info-value"><%=ticket.getEndTime()%></span>
        </div>
      </div>

      <div class="price-section">
        <div class="price">￥<%=ticket.getPrice()%></div>
        <form action='buyTrainTicket.jsp' method='post'>
          <input type='hidden' name='ticketId' value='<%=ticket.getId()%>'>
          <input type='hidden' name='departureCity' value='<%=java.net.URLEncoder.encode(ticket.getDepartureCity(), "UTF-8")%>'>
          <input type='hidden' name='arrivalCity' value='<%=java.net.URLEncoder.encode(ticket.getArrivalCity(), "UTF-8")%>'>
          <input type='hidden' name='departureDate' value='<%=ticket.getDepartureDate()%>'>
          <input type='hidden' name='startTime' value='<%=ticket.getStartTime()%>'>
          <input type='hidden' name='endTime' value='<%=ticket.getEndTime()%>'>
          <input type='hidden' name='price' value='<%=ticket.getPrice()%>'>
          <button type='submit' class='btn btn-primary'>购票</button>
        </form>
      </div>
    </div>
    <%
      }
    } else {
    %>
    <div class="no-results">
      <p>未能找到符合条件的车次。</p>
    </div>
    <%
      }
    %>
  </main>
</section>

<div class="steps">
  <img src="static/img/huoche1.png" alt="Steps Image">
</div>



<%--底部--%>
<div class="service-highlights">
  <div class="highlight-item">
    <i class="icon-price"></i>
    <span>价格公正，安心购买</span>
  </div>
  <div class="highlight-item">
    <i class="icon-quality"></i>
    <span>品质保证，放心出行</span>
  </div>
  <div class="highlight-item">
    <i class="icon-service"></i>
    <span>产品丰富，一站式服务</span>
  </div>
  <div class="highlight-item">
    <i class="icon-support"></i>
    <span>专业顾问，24小时客服</span>
  </div>
</div>
<!-- Footer Navigation -->
<footer class="site-footer">
  <div class="footer-content">
    <!-- Customer Service Section -->
    <div class="footer-section">
      <h3>消费者服务</h3>
      <p>同程投诉受理电话：95711</p>
      <p>同程投诉受理邮箱：tcfwfxbz@ly.com</p>
    </div>

    <!-- About Section -->
    <div class="footer-section">
      <h3>关于同程</h3>
      <ul>
        <li><a href="/about" class="footer-link">同程简介</a></li>
        <li><a href="/sites" class="footer-link">可信网站</a></li>
        <li><a href="/sitemap" class="footer-link">网站地图</a></li>
        <li><a href="/terms" class="footer-link">用户协议与隐私条款</a></li>
      </ul>
    </div>

    <!-- Partnership Section -->
    <div class="footer-section">
      <h3>加盟合作</h3>
      <ul>
        <li><a href="/join" class="footer-link">合作加盟</a></li>
        <li><a href="/business" class="footer-link">商旅合作</a></li>
        <li><a href="/insurance" class="footer-link">旅游保险</a></li>
        <li><a href="/store" class="footer-link">门店合作</a></li>
      </ul>
    </div>


    <div class="footer-section">
      <h3>联系我们</h3>
      <ul>
        <li><a href="/join" class="footer-link">联系我们</a></li>
        <li><a href="/business" class="footer-link">投诉建议</a></li>
        <li><a href="/insurance" class="footer-link">诚聘英才</a></li>
        <li><a href="/store" class="footer-link">廉洁举报平台</a></li>
      </ul>
    </div>

    <!-- Mobile App Section -->
    <div class="footer-section" id="footer-section">
      <h3>同程旅行app</h3>
      <div class="qr-code">
        <img src="static/img/erweima.png" alt="扫描下载APP">
        <p>手机预订更优惠</p>
      </div>
    </div>
  </div>

  <!-- Popular Links -->
  <div class="popular-links">
    <div class="links-section">
      <span>热点推荐：</span>
      <a href="/disneyland" class="footer-link">迪斯尼旅游</a>
      <a href="/thailand" class="footer-link">泰国旅游</a>
      <a href="/japan" class="footer-link">日本旅游</a>
      <!-- Add more links as needed -->
    </div>
  </div>

  <div id="foot-bottom">
    <p>Copyright © 2002-2024  版权所有  <a href="#">同程网络科技股份有限公司</a></p>
    <p><a href="#">经营许可证编号：合字B2-20180016 </a>    <a href="#">备案序号：苏ICP备09033604号</a>  <a href="#"><img src="static/img/微信图片编辑_20241216151627.jpg"></img>苏公网安备32059002001003号 </a>   <a href="#">旅行社业务许可证：L-JS-CJ00070</a>  </p>
    <p><a href="#">旅游网站诚信建设承诺书 </a>    <a href="#">旅游网站守法诚信责任状 </a>   <span>违规失信举报热线：4007-777-777转9</span></p>
    <p>国家文旅部全国旅游投诉热线：拨打12345，或登录全国旅游网络投诉举报平台</p>
    <p>网站网违法和不良信息举报 邮箱：jcj@ly.com</p>
    <p><img src="static/img/szicbok.gif"></p>

  </div>
</footer>



<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript"></script>


<script>
  $(document).ready(function() {
    // Add smooth page transition on link clicks
    $('.footer-link').click(function(e) {
      e.preventDefault();
      var href = $(this).attr('href');

      // Store the clicked link URL in session storage
      sessionStorage.setItem('lastClickedLink', href);

      // Fade out the page
      $('body').fadeOut(300, function() {
        // Navigate to the new page
        window.location.href = href;
      });
    });

    // Check if we're coming from a footer link click
    if (sessionStorage.getItem('lastClickedLink')) {
      // Fade in the page
      $('body').hide().fadeIn(300);
      // Clear the stored link
      sessionStorage.removeItem('lastClickedLink');
    }

    // Add hover animation for service highlights
    $('.highlight-item').hover(
            function() {
              $(this).stop().animate({ transform: 'translateY(-5px)' }, 200);
            },
            function() {
              $(this).stop().animate({ transform: 'translateY(0)' }, 200);
            }
    );
  });
</script>


<%--登录文字替换--%>
<script>
  if ("${user}"===""){
    document.getElementById("login-text-index").innerText = "您好，请登录"
    //将退出按钮隐藏
    document.getElementById("tuichu").style.display = "none"
    //将我的后台隐藏
    document.getElementById("my-admin").style.display = "none"

  }else{
    document.getElementById("login-text-index").innerText = "Hi,同程会员${user.username}"
    //将退出按钮显示
    document.getElementById("tuichu").style.display = "inline-block"
    //让登录按钮失去效果,页面不在跳转
    document.getElementById("login-text-index").href = "#"
    //隐藏注册按钮
    document.getElementById("zhuce").style.display = "none"
    //将我的后台展现出来
    //如果用户是管理员，则将我的后台展现出来
    if ("${user.status}"=="管理员"){
      document.getElementById("my-admin").style.display = "inline-block"
    }else {
      document.getElementById("my-admin").style.display = "none"
    }




  }


  //点击退出按钮
  $("#tuichu").click(function () {
    //将session域中的值清空
    $.ajax({
      url:"/logout",
      type:"post",
      dataType:"text",
      async:false,
      success:function (data) {
        if (data==200){
          //将session域中的值清空
          window.location.href="/index.jsp"
        }else{
          alert("退出失败")
        }
      }
    })




  })





</script>
</body>
</html>
